<template>
  <section class="shopDetail">
    <div class="bg-img"></div>
    <div class="wrap">
      <shopHeaderUtil ></shopHeaderUtil>
      <ticketBannerUtil></ticketBannerUtil>
      <productListUtil></productListUtil>
    </div>
    <commonNavUtil :iNow="-1"></commonNavUtil>
  </section>
</template>
<script>
import ticketBannerUtil from "./base/shop/ticketBannerUtil.vue";
import shopHeaderUtil from "./base/shop/shopHeaderUtil.vue";
import productListUtil from "./base/shop/productListUtil.vue";
import commonNavUtil from "./base/common/commonNavUtil.vue";


export default {
  components: {
    ticketBannerUtil,
    shopHeaderUtil,
    productListUtil,
    commonNavUtil
  },
  data () {
    return {
      
    }
  },
  
  methods: {
    
  }

}
</script>
<style lang="less" scoped>
.shopDetail {
  width: 3.75rem;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .bg-img {
    width: 3.75rem;
    height: 2.2rem;
    background: url("../assets/images/shop-icon-2.png") no-repeat center;
    background-size: cover;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: 2;
      top: 1.24rem;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg,transparent 0,hsla(0,0%,100%,.8) 80%,#f7f7f7);
    }
  }
  .wrap {
    width: 3.75rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
  }
}
</style>

